import CanvasComponent, { CanvasComponentOptions } from "./CanvasComponent";

export default class TwoWayProgress extends CanvasComponent {

  percent?: number
  borderColor?: string
  backgroundColor?: string
  positiveColor?: string
  negativeColor?: string

  constructor(options:  CanvasComponentOptions & {
    percent?: number
    borderColor?: string
    backgroundColor?: string
    positiveColor?: string
    negativeColor?: string
  }) {
    super(options)
    this.percent = options.percent ?? 0
    this.borderColor = options.borderColor
    this.backgroundColor = options.backgroundColor
    this.positiveColor = options.positiveColor
    this.negativeColor = options.negativeColor
    this.height = options.height ?? 10
  }


  async draw(context: CanvasRenderingContext2D, dt: number): Promise<void> {
    var percent = Math.min(Math.max(this.percent ?? 0, -100), 100)
    // background
    context.fillStyle = this.backgroundColor ?? 'transparent'
    context.strokeStyle = this.borderColor ?? 'rgba(255,255,255,0.15)'
    context.fillRect(this.screenX, this.screenY, this.width, this.height)
    context.strokeRect(this.screenX, this.screenY, this.width, this.height)

    // progress
    var width = this.width / 2
    if(this.percent > 0) {
      context.fillStyle = this.positiveColor ?? 'rgba(255,255,255,0.15)'
      context.fillRect(this.screenX + width, this.screenY, width * percent / 100, this.height)
    } else {
      context.fillStyle = this.negativeColor ?? 'rgba(255,255,255,0.15)'
      context.fillRect(this.screenX + width, this.screenY, width * percent / 100, this.height)
    }
  }

  setPercent(value: number) {
    this.percent = value
  }
} 